#{extends 'main.html' /} #{set title: 'Realizar Pedido' /}
<script>
	function formataMoeda(numero, casasDecimais, separadorDecimal,
			separadorMilhar, unidadeMoeda) {
		casasDecimais = isNaN(casasDecimais = Math.abs(casasDecimais)) ? 2
				: casasDecimais;
		separadorDecimal = separadorDecimal == undefined ? ","
				: separadorDecimal;
		separadorMilhar = separadorMilhar == undefined ? "." : separadorMilhar;
		unidadeMoeda = unidadeMoeda == undefined ? "" : unidadeMoeda + " ";
		var sinal = numero < 0 ? "-" : "";
		var parteInteira = parseInt(numero = Math.abs(+numero || 0).toFixed(
				casasDecimais))
				+ "";

		var j = (j = parteInteira.length) > 3 ? j % 3 : 0;
		return unidadeMoeda
				+ sinal
				+ (j ? parteInteira.substr(0, j) + separadorMilhar : "")
				+ parteInteira.substr(j).replace(/(\d{3})(?=\d)/g,
						"$1" + separadorMilhar)
				+ (casasDecimais ? separadorDecimal
						+ Math.abs(numero - parteInteira)
								.toFixed(casasDecimais).slice(2) : "");
	}

	function exibirPreco(t) {
		var precoTotal = parseFloat(document.formPedido.altura.value)
				* parseFloat(document.formPedido.largura.value) * parseFloat(t);
				+ formataMoeda(t, 2, '.', ',', 'R$');
		document.getElementById("getPreco").innerHTML = "<b>Preço por m²:</b>"
		document.getElementById("total").innerHTML = "<h3><b>Total a pagar: </b>"
				+ formataMoeda(precoTotal, 2, ',', '.', 'R$') + "</h3>";
	}
	
	$(document).ready(function() {
		$("#tipo").click(function() {
			var idx = document.formInfoCliente.tipo.selectedIndex;
			if (document.formInfoCliente.tipo.options[idx].text == "Pessoa Física") {
				$("#ident").text("CPF: ");
			 	$("#cpfcnpj").mask("999.999.999-99");  
			} else if (document.formInfoCliente.tipo.options[idx].text == "Pessoa Jurídica") {
				$("#ident").text("CNPJ: ");
				$("#cpfcnpj").mask("99.999.999/9999-99");  
			} else {
				$("#ident").text("CPF/CNPJ: ");
			}
		});
	});
	
</script>

<form name="formInfoCliente" action="@{ControllerCliente.buscarCliente}" method="GET">
	<table class="form">
		<th>
		<td><br>
			<h2 align="center">Informações do Cliente</h2></td>
		</th>
		
		<tr>
			<th>Tipo: </th>
			<td>
				<select name="tipo" id="tipo" value="${flash.tipo}">
					<option>Selecione</option>
					<option>Pessoa Física</option>
					<option>Pessoa Jurídica</option>
				</select>
			
			</td>
		</tr>
		
		<tr>
			<th id="ident">CPF/CNPJ:</th>
			<td><input class="end-cidade" name="cpfcnpj" id="cpfcnpj" type="text" size="30"/>
				<!-- <a href="#""><img type="submit" class="imgBusca" src="@{'/public/images/buscar.png'}"></a>-->
				<input id="busca" class="submit-text" type="submit" value="Busca" />
				
				#{ifErrors} 
					#{errors}
						<span style="color: red">${error}</span>
						<br>
					#{/errors} 
				#{/ifErrors}	
			</td>
		</tr>
</form>

<form name="formPedido" method="GET">
		<th>
		<td><br>
			<h2 align="center">Características do Produto</h2></td>
		</th>
		<tr>
			<th>Nome:</th>
			<td><input class="inp-text" name="nomeProd" id="nomeProd"
				type="text" size="30"/></td>
		</tr>

		<th>
		<td><br>
			<h4>Dimensões do Vidro</h4></td>
		</th>
		<tr>
			<th>Altura:</th>
			<td><input class="end-uf" name="altura" id="altura" type="text"
				size="30" /> Largura: <input class="end-uf" name="largura"
				id="largura" type="text" size="30" /></td>
		</tr>
		<th>
		<td><br>
			<h4>Tipo de material a ser utilizado</h4></td>
		</th>
		
		<tr>
			<th>Tipo de material:</th>
			<td>
				<select name="lstMateriais" id="lstMateriais">
						#{list items: list, as: 't'}
						<option onclick="exibirPreco('${t.getPreco()}')">${t.getNome()}</option>
						#{/list}
				</select> 
				<span id="getPreco"></span>
			</td>
		</tr>
		
		<th>
			<td>
				<hr id="total"></hr>
			</td>
		</th>
		
		<tr>
			<td class="submit-button-right" colspan="2"><br> <br>
				<input class="submit-text" type="submit" value="Realizar Pedido" />
		</tr>
	</table>
</form>
